<template>
  <div class="app-container">

    <el-image style="animation: header-effect 2s"
              class="background-image"
              lazy
              :src="backgroundImage"
              fit="cover">
      <template #error>
        <div class="image-slot background-image-error">
        </div>
      </template>
    </el-image>

    <div class="signature-wall myCenter my-animation-hideToShow">
      <h1 class="playful">
        Stardust的博客小站
      </h1>
      <div class="printer">
        <printer :printerInfo="printerInfo">
          <template #paper="{ content }" >
            <h3>
              {{ content }}<span class="cursor">|</span>
            </h3>
          </template>
        </printer>
      </div>
      <div id="bannerWave1"></div>
      <div id="bannerWave2"></div>
      <el-icon class="el-icon-arrow-down" @click="navigation('.page-container-wrap')"><ArrowDown /></el-icon>
    </div>

    <!-- 首页内容 -->
    <div class="page-container-wrap">
      <div class="page-container">
<!--        <div class="aside-content" v-if="showAside">-->
<!--          <myAside @selectSort="selectSort" @selectArticle="selectArticle"></myAside>-->
<!--        </div>-->
<!--        <div class="recent-posts" v-if="sortPage">-->
<!--          <div class="announcement background-opacity" :class=" sortPage ?'announcement-max-width':''">-->
<!--            <i class="fa fa-volume-up" aria-hidden="true"></i>-->
<!--            <div>-->
<!--              <div v-for="(notice, index) in notices" :key="index">-->
<!--                {{ notice }}-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--          <articleList :article-list="articles" :key="key"></articleList>-->
<!--          <div class="pagination-wrap">-->
<!--            <div @click="pageArticles()" class="pagination" v-if="pagination.total !== articles.length">-->
<!--              下一页-->
<!--            </div>-->
<!--            <div v-else style="-->



<!--            user-select: none">-->
<!--              ~~到底啦~~-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
        <div class="recent-posts">
          <div class="announcement background-opacity" :class=" sortPage ?'announcement-max-width':''">
            <div class="announcement-content">
              <el-select
                v-model="isSearchMode"
                placeholder="请选择行数"
                style="width: 70px; margin-right: 10px;border: white"
              >
                <el-option
                  v-for="item in divType"
                  :key="item"
                  :label="item.type"
                  :value="item.value"
                ></el-option>
              </el-select>
              <template v-if="!isSearchMode">
                <i class="fa fa-volume-up" aria-hidden="true"></i>
                <div>
                  <div v-for="(notice, index) in notices" :key="index">
                    {{ notice }}
                  </div>
                </div>
              </template>
              <template v-else>
                <input
                  v-model="queryParams.articleSearch"
                  class="search-input"
                  placeholder="输入关键词搜索文章"
                />
                <i
                  class="fa fa-search search-icon"
                  style="margin-left: 20px"
                  @click="getArticlesByType"
                  :class="{'active': isSearchMode}"
                ></i>
              </template>
            </div>

          </div>

          <div v-for="(item,index) in sortArticles" :key="index">
            <model-type :model-name="item.modelName" :articleList="item.articles" @to-article-page="toArticlePage" @selectSort2="pageToSortInfo(item)" :rows="item.rows" :columns="item.columns" :title-type="item.typeName"></model-type>
          </div>
        </div>
      </div>
    </div>


  </div>
</template>

<script setup>
import {getArticle, listArticle, selectArticlesByType} from "@/api/weblog/article";
import backgroundImage from '@/assets/file/backgroundImage.jpg'
import myAside from '@/views/weblogFront/myAside/index.vue'
import modelType from "@/views/weblogFront/util/modelType.vue"

import {getCurrentInstance, nextTick, onMounted, reactive, ref} from "vue";
import printer from "@/views/weblogFront/printer/index.vue"

import { useRoute, useRouter } from 'vue-router'

const route = useRoute();
const router = useRouter();
const sortRows = ref(3);
const sortColumns = ref(4);


const { proxy } = getCurrentInstance();
const key = ref(1);
const notices = ref(["公告一"]);
const printerInfo=ref("");
const open = ref(false);
const sortPage = ref(false);
const sortArticles = ref([]);
const queryParams = ref({
  current: 1,
  size: sortColumns.value*sortRows.value,
  total: 0,
  searchKey: "",
  sortId: null,
  articleSearch: ""
})
const isSearchMode = ref(false);
const divType=ref([
  {type:"搜索",value:true},{type: "公告",value:false}]);


/** 查询家庭信息列表 */
function getList() {
  loading.value = true;

}

// 取消按钮
function cancel() {
  open.value = false;
  reset();
}

// 表单重置
function reset() {

}

const toggleSearch = () => {
  isSearchMode.value = !isSearchMode.value;
}

const toArticlePage=async (articleId) => {

  let res = await getArticle(articleId);
  switch (res.viewStatus) {
    case 2:
      // 执行代码块2
      break;
    case 3:
      // 执行代码块2
      break;
    case 4:
      // 执行代码块2
      break;
    case 5:
      // 执行代码块2
      break;
    default:
      await router.push({path: '/article', query: {id: articleId}})
  }



}


const getGuShi =()=> {
  let xhr = new XMLHttpRequest();
  xhr.open('get', "https://v1.jinrishici.com/all.json");
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
      let guShi = JSON.parse(xhr.responseText);
      printerInfo.value = guShi.content;
    }
  };
  xhr.send();
}


function navigation(selector) {
  let pageId = document.querySelector(selector);
  window.scrollTo({
    top: pageId.offsetTop,
    behavior: "smooth"
  });
}
async function getArticlesByType() {
  let axiosResponse = await selectArticlesByType({title:queryParams.value.articleSearch,size:queryParams.value.size});
  if(!isEmpty(axiosResponse)){
    sortArticles.value = axiosResponse;
  }
}



function isEmpty(value) {
  return typeof value === "undefined" || value === null || (typeof value === "string" && value.trim() === "") || (Array.prototype.isPrototypeOf(value) && value.length === 0) || (Object.prototype.isPrototypeOf(value) && Object.keys(value).length === 0);
}


async function pageToSortInfo(item){
  await router.push({path: '/sort', query: {sortId: item.typeId, type: item.articleName,articleTitle:queryParams.value.articleSearch}})
}

// async function  selectSort(sort){
//   sortPage.value = true;
//   pagination.value = {
//     current: 1,
//     size: 10,
//     total: 0,
//     searchKey: "",
//     sortId: sort.id,
//     articleSearch: ""
//   };
//   articles.value = [];
//   await getArticles();
//   await nextTick(() => {
//     document.querySelector('.recent-posts').scrollIntoView({
//       behavior: "smooth",
//       block: "start",
//       inline: "nearest"
//     });
//   });
//   key.value = key.value + 1;
//
// }

onMounted(() => {
  getArticlesByType();
  getGuShi();


})

function pageArticles(){

}




// getList();
</script>
<style scoped>

.signature-wall {
  /* 向下排列 */
  display: flex;
  flex-direction: column;
  position: relative;
  user-select: none;
  height: 100vh;
  overflow: hidden;
}

.playful {
  color: var(--white);
  font-size: 40px;
}

.printer {
  cursor: pointer;
  color: var(--white);
  background: var(--translucent);
  border-radius: 10px;
  padding-left: 10px;
  padding-right: 10px;
}

#bannerWave1 {
  height: 84px;
  background: var(--bannerWave1);
  position: absolute;
  width: 200%;
  bottom: 0;
  z-index: 10;
  animation: gradientBG 120s linear infinite;
}

#bannerWave2 {
  height: 100px;
  background: var(--bannerWave2);
  position: absolute;
  width: 400%;
  bottom: 0;
  z-index: 5;
  animation: gradientBG 120s linear infinite;
}

/* 光标 */
.cursor {
  margin-left: 1px;
  animation: hideToShow 0.7s infinite;
  font-weight: 200;
}

.el-icon-arrow-down {
  font-size: 40px;
  font-weight: bold;
  color: var(--white);
  position: absolute;
  bottom: 60px;
  animation: my-shake 1.5s ease-out infinite;
  z-index: 15;
  cursor: pointer;
}



.page-container-wrap {
  background: var(--indexbg);
  position: relative;
  min-height: 100vh;
}

.page-container {
  display: flex;
  justify-content: center;
  width: 90%;
  padding: 0 20px 40px 20px;
  margin: 0 auto;
  flex-direction: row;
}

.recent-posts {
  width: 70%;
}

.announcement {
  padding: 22px;
  border: 1px dashed var(--lightGray);
  color: var(--greyFont);
  border-radius: 10px;
  margin: 40px auto 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.announcement-content {
  flex: 1;
  display: flex;
  align-items: center;
}

.search-icon {
  margin-left: 15px;
  font-size: 18px;
  color: var(--themeBackground);
  cursor: pointer;
  transition: all 0.3s;
}

.search-icon:hover {
  transform: scale(1.2);
}

.search-icon.active {
  color: var(--red);
}

.search-input {
  flex: 1;
  margin-left: 15px;
  padding: 5px 10px;
  border: 1px solid var(--lightGray);
  border-radius: 15px;
  background: transparent;
  color: var(--greyFont);
  outline: none;
}

.search-input:focus {
  border-color: var(--themeBackground);
}

.announcement i {
  color: var(--themeBackground);
  font-size: 22px;
  margin: auto 0;
  animation: scale 0.8s ease-in-out infinite;
}
.announcement-max-width{
  max-width: 780px;
}

.announcement div div {
  margin-left: 20px;
  line-height: 30px;
}

.aside-content {
  width: calc(30% - 40px);
  user-select: none;
  margin-top: 40px;
  margin-right: 40px;
  max-width: 300px;
  float: right;
}

.pagination-wrap {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.pagination {
  padding: 13px 15px;
  border: 1px solid var(--lightGray);
  border-radius: 3rem;
  color: var(--greyFont);
  width: 100px;
  user-select: none;
  cursor: pointer;
  text-align: center;
}

.pagination:hover {
  border: 1px solid var(--themeBackground);
  color: var(--themeBackground);
  box-shadow: 0 0 5px var(--themeBackground);
}

@media screen and (max-width: 1100px) {
  .recent-posts {
    width: 100%;
  }

  .page-container {
    width: 100%;
  }

  .announcement {
    padding: 15px;
  }

  .search-icon {
    font-size: 16px;
    margin-left: 10px;
  }

  .search-input {
    padding: 3px 8px;
    font-size: 14px;
  }
}

@media screen and (max-width: 1000px) {

  .page-container {
    /* 文章栏与侧标栏垂直排列 */
    flex-direction: column;
  }

  .aside-content {
    width: 100%;
    max-width: unset;
    float: unset;
    margin: 40px auto 0;
  }
}

@media screen and (max-width: 768px) {

  h1 {
    font-size: 35px;
  }
}

.app-container {
  padding: 0px !important;
}
:deep(.el-input__wrapper ) {
  box-shadow: 0 0 0 1px #fff inset;
}
</style>
